Node.jsベースのCMS calipsoを動かしてみる

Node.jsベースのCMS calipsoを動かしてみる

Clock Icon2014.06.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

表題の通りですが、インストールして動かすにあたって若干ハマったところがありますので、備忘録として残しておきたいと思います。
(WYSIWYGエディタの組み込み方法Role設定追加後の編集で落ちるの回避方法)

動作環境

記載時点のバージョンは下記の通りになります。

  1. MacOS X 10.8.5
  2. Node.js 0.10.29
  3. npm 1.4.16
  4. mongodb 2.4.10
  5. calipso 0.3.50

インストール&セットアップ

calipsoのインストールは非常に簡単ですが、前準備としてNode.js,mongodb,npmを先にインストールしておく必要がありますのでインストールしておきましょう
下記の/Library/WebServer/Documents/MySiteは適宜変更して下さい。

$ sudo npm install calipso -g
$ sudo calipso site /Library/WebServer/Documents/MySite
$ cd /Library/WebServer/Documents/MySite
$ calipso server

calipsoをバックグラウンド起動する場合はcalipso server server.port=3000 &で可能です。

calipsoサーバーを起動するした後にブラウザを起動してURLに http://127.0.0.1:3000 を入力して、calipsoにアクセスします。そうすると下記の様な画面に入って初回アクセス時のセットアップ画面が表示されます。

calipso_2

コマンド起動したウィンドウにInstallation Passwordが表示されるので、Installation Passwordをコピーをして、貼付けます

calipso_1_1

Installation Passwordの入力が成功すると次画面が表示されますので Create Database をクリックします。(mongodbは事前に起動させておいて下さい)

calipso_3

次にDB作成が成功すると下記の画面が表示されますので、Adminユーザの情報を入力してCreate Admin をクリックします。

calipso_4

最後に下記の様にモジュールの選択画面が表示されますので必要なものにチェックをつけてセットアップを完了させます。(当方はAloha Text Editorをチェックしました。)

calipso_5

完了すると下記画面に遷移します。

calipso_7_1

これでインストール&セットアップは完了です。

スキンを変えてみる

先ほどセットアップ画面で作成したAdminユーザでログインして、メニューにある ADMINISTRATION / Core / Configuration を選んでThemeの Frontend Theme と Admin Theme のところをcleanslateからcalipsoに変更してみます。

calipso_7_2

見覚えのあるスキンになりました。

calipso_11

コンテンツを登録してみる

CONTENT MANAGEMENTメニューからコンテンツを選択すると現在登録されているコンテンツの一覧が表示されます。

calipso_12

左側にある Create ボタンをクリックして、コンテンツのタイプを選択して Next ボタンックをクリックします。

するとCMSにありがちな画面が表示されますので、必要な部分に入力して登録します。

calipso_13

ただ・・・この状態だとHTMLタグを自身で入れて書く必要があり、コンテンツ登録の敷居が一気に上がってしまいます。そこでWYSIWYGエディタを組み込むことにします。

calipsoにWYSIWYGエディタを組み込む

CMSにつきもののWYSIWYGエディタがデフォルトでは入ってない?ようなので、ここではTINYMCEを組み込んでみます。
TINYMCEのページでTinyMCE 4.1.0を/tmpにダウンロードしました。

$ cd /tmp
$ unzip tinymce_4.1.0.zip
$ cd tinymce
$ cd js
$ sudo cp -rp tinymce /Library/WebServer/Documents/MySite/themes/downloaded/calipso/public/js
$ cd /Library/WebServer/Documents/MySite ←calipso site コマンドで指定したパス
$ cd themes/downloaded/calipso/templates/
$ sudo vi default.html

default.htmlの</body>の下にtinymce.initを追加します

</body>
<script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    width: 850,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 });
</script>
<%- scripts %>
</html>

編集が終わったらdefault.htmlを保存して、calipsoサーバを再起動します。

CONTENT MANAGEMENTメニューからコンテンツを選択して、左側にある Create ボタンをクリックしてコンテンツタイプを選択して Next をクリックします。すると下記画面のようにWYSIWYGエディタが出てきます。

calipso_15

Aloha Rich Text EditorもModuleで有効にしてあるので、ログインした状態でTOPページにアクセスすると黄色い枠が表示されるブロックは直感的にコンテンツの編集ができます。

calipso_16

下記は編集状態の画面

calipso_17

calipso管理画面でRoleを追加してみる

インストール直後はAdministrator、Contributor、Guestの3つが定義されていますが、独自のRoleを追加してみようと思い、適当に2つほどRoleを追加しました。

calipso_18

次に登録したサンプル1のリンクをクリックして再編集しようとすると・・・下記のエラーがコンソールに出てNodeが落ちてしまいます。

30 Jun 19:26:16 - error: Attempting to add menu item with invalid params, please update your module for the 0.3.0 api, path: return

/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/utils.js:419
        throw err;
              ^
TypeError: Cannot read property 'permit' of undefined
    at CalipsoMenu.addMenuItem (/Library/WebServer/Documents/MySite/lib/core/Menu.js:83:14)
    at finish (/Library/WebServer/Documents/MySite/modules/core/user/user.js:245:29)
    at Promise.<anonymous> (/Library/WebServer/Documents/MySite/modules/core/user/user.js:273:7)
    at Promise.<anonymous> (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:162:8)
    at Promise.emit (events.js:95:17)
    at Promise.emit (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:79:38)
    at Promise.fulfill (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:92:20)
    at /Library/WebServer/Documents/MySite/node_modules/mongoose/lib/query.js:1833:13
    at model.Document.init (/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/document.js:251:11)
    at completeOne (/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/query.js:1831:10)

これを回避するためにuser.jsを修正します。

$ cd /Library/WebServer/Documents/MySite/modules/core/user ←インストールしたディレクトリに適宜変更して下さい。
$ vi user.js

245行目の記述

res.menu.adminToolbar.addMenuItem({name:'Delete Role', path:'return', url:'/admin/roles/' + role._id + '/delete', description:'Delete role ...', security:[], icon:"icon-close"});

res.menu.adminToolbar.addMenuItem(req,{name:'Delete Role', path:'return', url:'/admin/roles/' + role._id + '/delete', description:'Delete role ...', security:[], icon:"icon-close"});

としてaddMenuItemの引数に req を追加します。
これで再度calipso serverを起動してRoleの編集してみると無事編集画面が開きます。

calipso_19

まとめ

デフォルトでインストールするとWYSIWYGがなかったので、今回はWYSIWYGの組み込み手順とRoleの編集で落ちてしまうところの回避までで一旦留めておきます。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.